<template>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
     <el-row class="tac">
      <el-col>
        <el-menu
          default-active="1"
          class="el-menu"
          @select="getIndex"
        >
        <img src="../assets/华农.png.png" alt="" class="titleImg">
          <el-menu-item index="1" class="menuItem">
            <el-icon><Notification /></el-icon>
            <span>常规防控值班</span>
          </el-menu-item>
          <el-menu-item index="2" class="menuItem">
            <el-icon><Calendar /></el-icon>
            <span>值班人员</span>
          </el-menu-item>
          <el-menu-item index="3" class="menuItem">
            <el-icon><Promotion /></el-icon>
            <span>发布问卷</span>
          </el-menu-item>
          <el-menu-item index="4" class="menuItem">
            <el-icon><EditPen /></el-icon>
            <span>发布公告</span>
          </el-menu-item>
          <el-menu-item index="5" class="menuItem">
            <el-icon><MapLocation /></el-icon>
            <span>密接轨迹</span>
          </el-menu-item>
          <el-menu-item index="6" class="menuItem">
            <el-icon><Postcard /></el-icon>
            <span>核酸人数</span>
          </el-menu-item>
        </el-menu>
      </el-col>
     </el-row>
     <div class="row">
       <div class="title">校园防疫网页端</div>
       <div class="avatar-container">
         <img class="avatar" :src="avatarURL" alt="头像">
         <span class="username">{{ username }}</span>
       </div>
     </div>
     <RegularDuty v-show="showRegular"></RegularDuty>
     <DutyMan v-show="showDuty"></DutyMan>
     <QuestionNaire v-show="showQuestion"></QuestionNaire>
     <SendAnnouncement v-show="showAnnouncement"></SendAnnouncement>
     <TraceTracking v-show="showTrace"></TraceTracking>
     <CheckNucleicAcidFilterResult v-show="showCheckNucleicAcidFilterResult"></CheckNucleicAcidFilterResult>
</template>

<script>
// @ is an alias to /src
import RegularDuty from '@/components/RegularDuty.vue'
import DutyMan from '@/components/DutyMan.vue'
import QuestionNaire from '@/components/QuestionNaire.vue'
import SendAnnouncement from '@/components/SendAnnouncement.vue'
import TraceTracking from '@/components/TraceTracking.vue'
import CheckNucleicAcidFilterResult from "@/components/CheckNucleicAcidFilterResult";

export default {
  name: 'HomeView',
  components: {
    CheckNucleicAcidFilterResult,
    RegularDuty,
    DutyMan,
    QuestionNaire,
    SendAnnouncement,
    TraceTracking
  },
  data(){
    return{
      showRegular:true,
      showDuty:false,
      showQuestion:false,
      showAnnouncement:false,
      showTrace:false,
      showCheckNucleicAcidFilterResult: false,
      username: null,
      avatarURL: null
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init() {
      this.username = window.sessionStorage.getItem('username')
      this.avatarURL = window.sessionStorage.getItem('avatarURL')
    },
    getIndex(event){
      if(event==1){
        this.showRegular=true
        this.showDuty=false
        this.showQuestion=false
        this.showAnnouncement=false
        this.showTrace=false
        this.showCheckNucleicAcidFilterResult = false
      }else if(event==2){
        this.showRegular=false
        this.showDuty=true
        this.showQuestion=false
        this.showAnnouncement=false
        this.showTrace=false
        this.showCheckNucleicAcidFilterResult = false
      }else if(event==3){
        this.showRegular=false
        this.showDuty=false
        this.showQuestion=true
        this.showAnnouncement=false
        this.showTrace=false
        this.showCheckNucleicAcidFilterResult = false
      }else if(event==4){
        this.showRegular=false
        this.showDuty=false
        this.showQuestion=false
        this.showAnnouncement=true
        this.showTrace=false
        this.showCheckNucleicAcidFilterResult = false
      }else if(event==5){
        this.showRegular=false
        this.showDuty=false
        this.showQuestion=false
        this.showAnnouncement=false
        this.showTrace=true
        this.showCheckNucleicAcidFilterResult = false
      }else if(event==6){
        this.showRegular=false
        this.showDuty=false
        this.showQuestion=false
        this.showAnnouncement=false
        this.showTrace=false
        this.showCheckNucleicAcidFilterResult=true
      }
    }
  }
}
</script>

<style scoped>

.tac{
  left: 0;
  top: 0;
  width: 12%;
  height: 100vh;
}
.el-menu{
  height: 100%;
}
.titleImg{
  width: 80%;
  margin: 10%;
}
.menuItem{
  display: flex;
  justify-content: center;
  align-items: center;
}
.row{
  position: absolute;
  top: 0;
  left: 12%;
  width: 88%;
  height: 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title{
  width: 220px;
  color: rgba(61, 158, 255, 1);
  font-size: 26px;
}

.avatar-container {
  margin-right: 50px;
}

.avatar {
  height: 25px;
  width: 25px;
  margin-right: 20px;
  border-radius: 50%;
  vertical-align: middle;
}

.username {
  vertical-align: middle;
}

</style>
